import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:spree/pages/games/rules_banner.dart';
import 'package:spree/utils/utils.dart';
import 'package:spree/widgets/common_container.dart';

class DoubleRules extends StatefulWidget {
  DoubleRules({Key? key}) : super(key: key);

  @override
  State<DoubleRules> createState() => _DoubleRulesState();
}

class _DoubleRulesState extends State<DoubleRules>
    with TickerProviderStateMixin {
  int _curIndex = 0;
  late TabController _tabController;
  final GlobalKey<RulesBannerState> _globalKey = GlobalKey();
  List _tabs = ["Rules", "Limites"];
  int _fIndex = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CommonContainer(
        child: ListView(
          children: [
            TabBar(
              controller: _tabController,
              tabs: _tabs.map((e) => Tab(text: e)).toList(),
              onTap: (i) {
                setState(() {
                  _fIndex = i;
                });
              },
            ),
            _fIndex == 0
                ? Column(
                    children: [
                      RulesBanner(
                          height: 350,
                          imageList: [
                            Column(
                              children: [
                                Container(
                                  padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
                                  width: Utils().getScreenWidth(context),
                                  decoration: BoxDecoration(
                                    color: Color(0xFF291F62),
                                    borderRadius: const BorderRadius.all(
                                        Radius.circular(8.0)),
                                  ),
                                  child: Column(
                                    children: [
                                      Image.asset(
                                        'images/games/double/dice-info1.png',
                                        width: 250,
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(top: 10),
                                        child: Image.asset(
                                            'images/games/mines/mines-info1.png'),
                                      ),
                                    ],
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 20),
                                  child: Text(
                                    'Adjust your bet amount.',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 18,
                                        fontWeight: FontWeight.w700),
                                  ),
                                ),
                              ],
                            ),
                            Column(
                              children: [
                                Container(
                                  padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
                                  width: Utils().getScreenWidth(context),
                                  decoration: BoxDecoration(
                                    color: Color(0xFF291F62),
                                    borderRadius: const BorderRadius.all(
                                        Radius.circular(8.0)),
                                  ),
                                  child: Column(
                                    children: [
                                      _rulesCard(
                                          color: Colors.white,
                                          text: 'WIN: 14x'),
                                      _rulesCard(
                                          color: Color(0xFF3D77E8),
                                          text: 'WIN: 2x',
                                          margin: EdgeInsets.only(top: 10)),
                                      _rulesCard(
                                          color: Color(0xFFFF506F),
                                          text: 'WIN: 2x',
                                          margin: EdgeInsets.only(top: 10)),
                                      Container(
                                        height: 40,
                                        margin: EdgeInsets.only(top: 20),
                                        child: ElevatedButton(
                                            style: ButtonStyle(
                                              backgroundColor:
                                                  MaterialStateProperty.all(
                                                      Color(0xFFFF4444)),
                                            ),
                                            onPressed: () {
                                              Navigator.pop(context);
                                            },
                                            child: Text('Bet')),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(top: 20),
                                  child: Text(
                                    'Choose a treasure to bet on.',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 18,
                                        fontWeight: FontWeight.w700),
                                  ),
                                ),
                              ],
                            ),
                            Column(
                              children: [
                                Container(
                                  padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
                                  width: Utils().getScreenWidth(context),
                                  decoration: BoxDecoration(
                                    color: Color(0xFF291F62),
                                    borderRadius: const BorderRadius.all(
                                        Radius.circular(8.0)),
                                  ),
                                  child: Column(
                                    children: [
                                      Text(
                                        '1.00X',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 26,
                                            fontWeight: FontWeight.w700),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(top: 10),
                                        child: Text(
                                          'Place your Bet',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 16,
                                              fontWeight: FontWeight.w700),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(top: 10),
                                        child: Image.asset(
                                          'images/games/double/dice-info1.png',
                                          width: 300,
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(top: 10),
                                        child: Image.asset(
                                          'images/up-arrow.png',
                                          height: 40,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(top: 20),
                                  child: Text(
                                    'Awaiting the results of the draw.',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 18,
                                        fontWeight: FontWeight.w700),
                                  ),
                                )
                              ],
                            )
                          ],
                          key: _globalKey,
                          index: _curIndex,
                          onchange: (i){
                            setState(() {
                              _curIndex = i;
                            });
                          },),
                      _curIndex == 2
                          ? Container(
                              height: 60,
                              width: Utils().getScreenWidth(context),
                              child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xFF5484FF)),
                                  ),
                                  onPressed: () {
                                    Navigator.pop(context);
                                  },
                                  child: Text('Start the game')),
                            )
                          : Container(
                              height: 60,
                              width: Utils().getScreenWidth(context),
                              child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xFF5484FF)),
                                  ),
                                  onPressed: () {
                                    setState(() {
                                      _curIndex++;
                                    });
                                    _globalKey.currentState
                                        ?.jumpToPage(_curIndex);
                                  },
                                  child: Text('Next')),
                            ),
                    ],
                  )
                : Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Maximum Bet:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'R\$ 2,000',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w600),
                          )
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Maximum Payment:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'R\$ 4,000',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w600),
                          )
                        ],
                      )
                    ],
                  ),
          ],
        ),
      ),
    );
  }

  Widget _rulesCard({Color? color, String? text, EdgeInsets? margin}) {
    return Container(
      margin: margin,
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Color(0xFF413882),
        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
      ),
      child: Row(
        children: [
          Container(
            width: 40,
            height: 40,
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: color ?? Colors.white,
              borderRadius: const BorderRadius.all(Radius.circular(8.0)),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 20),
            child: Text(
              text ?? '',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.w700),
            ),
          )
        ],
      ),
    );
  }
}
